<template>
  <div class="management-course">
    <h1>课程信息管理</h1>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>课程</th>
          <th>限制人数</th>
          <th>课时</th>
          <th>上课教师</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" :key="course.id">
          <td>{{ course.id }}</td>
          <td>{{ course.name }}</td>
          <td>{{ course.quantity }}</td>
          <td>{{ course.lesson }}</td>
          <td>{{ course.teacher_id }}</td>
          <td><button @click="deleteCourse(course.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ManagementCourse',
  data() {
    return {
      courses: [],
    };
  },
  created() {
    this.fetchCourses();
  },
  methods: {
    async fetchCourses() {
      try {
        const token = localStorage.getItem('token');
        console.log('准备发送的token:', token);
        const response = await axios.get('http://192.168.129.76:8080/api/courses', {
          headers: { 'Authorization': `Bearer ${token}` }
        });
        this.courses = response.data.data;
      } catch (error) {
        console.error('获取课程信息错误:', error);
        if (error.response && error.response.status === 401) {
          alert('Token无效或已过期，请重新登录。');
        } else {
          alert('获取课程信息失败，请检查网络连接。');
        }
      }
    },
    async deleteCourse(courseId) {
      try {
        const token = localStorage.getItem('token');
        await axios.delete(`http://192.168.129.76:8080/api/courses/${courseId}`, {
          headers: { 'Authorization': `Bearer ${token}` }
        });
        this.courses = this.courses.filter(course => course.id !== courseId);
        alert('课程删除成功');
      } catch (error) {
        console.error('删除课程错误:', error);
        if (error.response && error.response.status === 401) {
          alert('Token无效或已过期，请重新登录。');
        } else {
          alert('课程删除失败，请检查网络连接。');
        }
      }
    }
  }
};
</script>

  
<style scoped>
.management-course {
  display: flex;
  flex-direction: column; /* 使子元素垂直排列 */
  align-items: center; /* 使子元素在交叉轴上居中 */
  padding: 20px; /* 为整个管理区域添加内边距 */
}

.management-course h1 {
  margin-bottom: 20px; /* 为标题和表格之间添加一些间距 */
}

.management-course table {
  width: 100%; /* 设置表格宽度为管理区域的80%，使其不过于宽 */
  max-width: 1200px; /* 设置表格最大宽度，避免在大屏幕上过于宽 */
  border-collapse: collapse;
  margin: 0 auto; /* 使表格在其容器中居中 */
}

.management-course th, .management-course td {
  border: 1px solid #cfe0ff;
  padding: 5px 50px; /* 增加单元格的内边距 */
  text-align: center;
  vertical-align: middle;
}

.management-course th {
  background-color: #d8e3f5;
}

.management-course td {
  background-color: #f3f7ff;
}
.management-course button {
  cursor: pointer;
  padding: 8px 15px; /* 增加按钮的内边距 */
  background-color: #88b4ff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s; /* 添加背景色过渡效果 */
}

.management-course button:hover {
  background-color: #da190b;
}
</style>